<template>
  <div>
    <HeadNav />
    <Nav />
    <div class="center_big">
      <div class="Tab_span">
        <span @click="ifshow(1)" :class="{'active':ifshow1}">我的订单</span>
        <span @click="ifshow(2)" :class="{'active':ifshow2}">个人资料</span>
        <span @click="ifshow(3)" :class="{'active':ifshow3}">我的假期</span>
        <span @click="ifshow(4)" :class="{'active':ifshow4}">管理费缴纳</span>
      </div>
      <keep-alive>
        <componnet :is="Order" v-show="ifshow1"></componnet>
      </keep-alive>
      <keep-alive>
        <componnet :is="Details" v-show="ifshow2"></componnet>
        </keep-alive>
          <keep-alive>
        <componnet :is="Myvacations" v-show="ifshow3"></componnet>
        </keep-alive>
        <keep-alive>
        <componnet :is="Managements" v-show="ifshow4"></componnet>
        </keep-alive>
     
    </div>
    <Foot />
  </div>
</template>

<script>
import Nav from "../../componnet/qiantai/Nav";
import Foot from "../../componnet/qiantai/Foot";
import HeadNav from "../../componnet/qiantai/HeadNav";
import Details from "./dynamic/details";
import Order from "./dynamic/order";
import Management from "./dynamic/management";
import Myvacation from "./dynamic/Myvacation";
export default {
  name: "Personal",
  data() {
    return {
      Order:Order,
      Managements:Management,
      Myvacations:Myvacation,
      Details:Details,
      ifshow1: true,
      ifshow2: false,
      ifshow3: false,
      ifshow4: false
    };
  },
  methods: {
    ifshow(e) {
      if (e == 1) {
        this.ifshow1 = true;
        this.ifshow2 = false;
        this.ifshow3 = false;
        this.ifshow4 = false;
      }
       if(e == 2){
        this.ifshow1 =false;
        this.ifshow2 = true;
        this.ifshow3 = false;
        this.ifshow4 = false;
      }
      if(e == 3){
        this.ifshow1 =false;
        this.ifshow2 = false;
        this.ifshow3 = true;
        this.ifshow4 = false;
      }
      if(e == 4){
        this.ifshow1 =false;
        this.ifshow2 = false;
        this.ifshow3 = false;
        this.ifshow4 = true;
      }
    }
  },
  components: {
    Nav,
    HeadNav,
    Foot,
    Order,
    Management,
    Myvacation,
    Details
  }
};
</script>

<style lang="less" scoped>
.center_big {
  margin-left: 200px;
  .Tab_span{
    width: 80%;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
    text-align: center;
    display: flex;
    span{
      display: block;
      flex: 1;
      height: 46px;
      box-sizing: border-box;
      border: 1px solid #000;
      background-color: #cccccc;
      
    }
    .active{
      background-color: #ffffff;
    }
    
  }
}
</style>